
<template>
  <view-page>
    <div class="bg"></div>
    <div class="container">
      <div class="header-title">
        <div class="left" @touchstart.stop="() => $router.go(-1)">
          <span class="material-symbols-outlined">chevron_left</span>
          <span class="text">我的送检</span>
        </div>
      </div>
      <ReportMenus :menus="menus" :showBg="true" />
      <StatusCard :status="1" />
      <StatusCard :status="0" />
      <StatusCard :status="2" />
      <!-- <ReportCard :reportList="reportList" /> -->
    </div>

    <CardView/>
    <FooterView />
  </view-page>
</template>

<script setup>
import {ref} from 'vue'
import CardView from '@/components/Footer/CardView'
import FooterView from '@/components/Footer/FooterView.vue';
import StatusCard from './StatusCard.vue';
// import ReportCard from './ReportCard.vue';
// import  from './UserReportCard.vue';
import ReportMenus from './ReportMenus.vue';

const menus = ref([
  {
    id: 1,
    title: '我的送检',
    icon: 'assignment',
    path: '/mobile/my-submission',
  },
  {
    id: 2,
    title: '我的预约',
    icon: 'event_available',
    path: '/mobile/my-order',
  },
  {
    id: 3,
    title: '报告验伪',
    icon: 'barcode_scanner',
    active: true,
    path: '/mobile/my-report-result',
  },
  { id: 4, title: '送样单位', icon: 'home_work',path: '/mobile/my-report-list', },
  { id: 5, title: '地址信息', icon: 'pin_drop', path: '/mobile/my-report-company', },
  { id: 6, title: '个人信息', icon: 'badge', path: '/mobile/user-center', },
])

// const reportList = ref([
//   {
//     id: 1, 
//     title: '热解有机碳；总有机碳；', 
//     count: 2, 
//     status: '默认', 
//     desc: '油，气 ｜ 邮寄',
//     address: '北京石油地质实验研究中心',
//     user: '王晓蕾',
//     phone: '18615508558'
//   },
//   {
//     id: 2, 
//     title: '双探头低真空场发射扫描电镜矿物扫描系统', 
//     count: 2, 
//     status: '默认', 
//     desc: 'Apreo,LoVac 30kv',
//     address: '北京石油地质实验研究中心',
//     user: '王晓蕾',
//     phone: '18615508558'
//   },
//   {
//     id: 3, 
//     title: '热解有机碳；总有机碳；', 
//     count: 2, 
//     status: '默认', 
//     desc: '油，气 ｜ 邮寄',
//     address: '北京石油地质实验研究中心',
//     user: '王晓蕾',
//     phone: '18615508558'
//   },
//   {
//     id: 4, 
//     title: '热解有机碳；总有机碳；', 
//     count: 2, 
//     status: '默认', 
//     desc: '油，气 ｜ 邮寄',
//     address: '北京石油地质实验研究中心',
//     user: '王晓蕾',
//     phone: '18615508558'
//   }
// ])
</script>

<style scoped lang="scss">

.container{
  position: relative;
  // margin-top: dpi(13rem);
  z-index: 1;
  .header-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: dpi(5rem);
    .left{
      display: flex;
      align-items: center;
      color: #fff;
      font-family: swiper-icons;
      text-transform: none !important;
      letter-spacing: 0;
      font-variant: initial;
      line-height: 1;
      .icon{
        &::after{
          font-family: swiper-icons;
          content: 'prev';
        }
      }
      .text{
        margin-left: dpi(4rem);
        font-family: PingFangSC-Semibold;
        font-size: dpi(4rem);
        color: #ffffff;
      }
    }
  }
}
</style>